import { Cell, InfiniteLoading } from "@nutui/nutui-react-taro";
import { useEffect, useState } from "react";
import UserCard from "../../../../components/UserCard";

const sleep = (time) =>
  new Promise((resolve) => {
    setTimeout(resolve, time);
  });
const InfiniteUlStyle = {
  height: "100%",
  width: "100%",
  padding: "0",
  overflowY: "auto",
  overflowX: "hidden",
};

const InfiniteLiStyle = {
  marginTop: "10px",
  fontSize: "14px",
  color: "rgba(100, 100, 100, 1)",
  textAlign: "center",
};
const UserList = () => {
  const [defaultList, setDefaultList] = useState([]);
  const [hasMore, setHasMore] = useState(true);

  useEffect(() => {
    init();
  }, []);

  const loadMore = async () => {
    await sleep(2000);
    const curLen = defaultList.length;
    for (let i = curLen; i < curLen + 10; i++) {
      defaultList.push(`${i}`);
    }
    if (defaultList.length >= 30) {
      setHasMore(false);
    } else {
      setDefaultList([...defaultList]);
    }
  };

  const init = () => {
    for (let i = 0; i < 10; i++) {
      defaultList.push(`${i}`);
    }
    setDefaultList([...defaultList]);
  };

  const renderJoyImg = (() => {
    return (
      <img
        alt=""
        style={{ height: "24px", width: "24px" }}
        src="https://img10.360buyimg.com/imagetools/jfs/t1/157510/3/39873/353/65fa8bfeF2627cb86/bd9e734d9fda59f2.png"
        className="nut-infinite-bottom-tips-icons"
      />
    );
  })();

  return (
    <>
      <Cell id="InfiniteLoadingscroll">
        <ul style={InfiniteUlStyle}>
          <InfiniteLoading
            target="InfiniteLoadingscroll"
            hasMore={hasMore}
            onLoadMore={loadMore}
            loadingText={
              <>
                {renderJoyImg}
                加载中
              </>
            }
            loadMoreText={
              <>
                {renderJoyImg}
                没有更多了
              </>
            }
          >
            {defaultList.map((item, index) => {
              return <UserCard key={index} index={index + 1} />;
            })}
          </InfiniteLoading>
        </ul>
      </Cell>
    </>
  );
};
export default UserList;
